<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/time.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
        生命周期主要阶段:
            https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
            挂载(初始化相关属性)
                1. beforeCreate => 在实例初始化之后,数据观测和事件配置之前被调用
                2. created  => 在实例创建完成后被立即调用
                3. beforeMount  => 在挂载开始之前被调用
                4. mounted  => el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子
            更新 ( 元素或组件的变更操作)
                1. beforeUpdate  => 数据更新时调用,发生在虚拟DOM打补丁之前 
                2. updated => 由于数据更新导致的虚拟DOM重新渲染和打补丁,在这之后调用该钩子
            销毁 (销毁相关属性)
                1. beforeDestroy => 实例销毁之前调用
                2. destroyed => 实例销毁后调用

        -->
        <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
    </div>

    <script lang="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "生命周期"
            },
            methods: {
                update: function () {
                    this.msg = 'hello';
                },
                destroy: function () {
                    this.$destroy();
                }
            },
            beforeCreate: function () {
                console.log('beforeCreate');
            },
            created: function () {
                console.log('created');
            },
            beforeMount: function () {
                console.log('beforeMount');
            },
            mounted: function () {
                console.log('mounted');
            },
            beforeUpdate: function () {
                console.log('beforeUpdate');
            },
            updated: function () {
                console.log('updated');
            },
            beforeDestroy: function () {
                console.log('beforeDestroy');
            },
            destroyed: function () {
                console.log('destroyed');
            }


        })
    </script>

</body>

</html>